<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SerachEffect</title>
</head>

<script src="../jquery-1.6.2.min.js" type="text/javascript"></script>

<link rel="stylesheet"  href="../reset.css"  />
<style>
body{padding:20px;}
input{color:#999; margin: 10px;  }
 </style>
<body>
<input type="text"  value="搜索"/>
 <input type="text"  value="输入邮箱地址"/>
<script type="text/javascript" >
 /****
 * c= color
 */
 function logs(){
		var s='';
		for(var i=0,aLen=arguments.length;i<aLen;i++){
			s+=arguments[i]+' ';
		}
		s=s.slice(0,-1);
		if(!window.console) alert(s);
		else
		console.log(s);
}
 /**
  * $.TextEffect
  * @extends jquery.1.6.2
  * @fileOverview   文本框效果
  * @author 2kid
  * @email 444212235@qq.com
  * @site 2kid.org
  * @version 1.0
  * @date 2011-08-18
  * Copyright (c) 2011-2012 2kid
  * @example
  *   $('input').TextEffect();
  */
(function($){

	$.fn.TextEffect=function(options){
		var opt=$.extend({},$.fn.TextEffect.settings,options);
		return this.each(function(){
			var	$this=$(this);
			var	textEffect=new TextEffect(opt);
				textEffect.init($this);

		});
	}
	var TextEffect=function(options){
		this.o = options;
		this.$textBox = null;
        this.color=this.o.color;
        this.isRep=this.o.isRep;

	}
	TextEffect.prototype={
		init:function(obj){
            var _this=this;
			_this.$textBox=obj;
            _this.sColor=_this._rgbTOhsl(_this.$textBox.css('color')),
			_this.sText=_this.$textBox.val();
            _this.$repText=null;
			_this.$textBox.bind('focus',function(){
                if(_this.sColor==_this._rgbTOhsl(_this.$textBox.css('color'))&&_this.sText==_this.$textBox.val()){
					_this.$textBox.val('');
				}
                _this.$textBox.css('color',_this.color);
            }).bind('blur',function(){
                if(_this.$textBox.val().match(/^\s*$/)){
					_this.$textBox.css('color',_this.sColor).val(_this.sText);
				}
            }).bind('keyup focus',function(){
                    _this.$repText.css('opacity',.3);
                if(_this.$textBox.val()!=''){
                    _this.$repText.hide();
                }
            });
            if(this.isRep)
            this.appendRep();
		},
        
        _rgbTOhsl:function(rgb){
            if(rgb.match(/#/)) return rgb;
            var s='#',colorArr=rgb.match(/\d+/g);
                s+=(parseInt(colorArr[0],10)).toString(16);
                s+=(parseInt(colorArr[1],10)).toString(16);
                s+=(parseInt(colorArr[2],10)).toString(16);
            return s;
	    },
        _textFocus:function(){
            this.$textBox.focus().css('color',this.color);
        },
        appendRep:function(){
            var _this=this;
            var ofs=_this.$textBox.val('').offset();
            var textHeight=_this.$textBox.outerHeight(),textWidth=_this.$textBox.outerWidth();
            var textPleft=parseInt(_this.$textBox.css('paddingLeft')),
                textPtop=parseInt(_this.$textBox.css('paddingTop'));
            _this.$repText=$('<div></div>').css({
                height:textHeight,width:textWidth,
                left:ofs.left+textPleft+3,top:ofs.top+textPtop,
                position:'absolute',
                cursor:'text',
                color:_this.sColor,
                lineHeight:textHeight+'px'
            }).text(_this.sText).appendTo('body');
            _this.$textBox.data('rep',_this.$repText); 
            _this.$repText.bind('click',function(event){
                _this._textFocus();
            });
             _this.$textBox.unbind('blur').bind('blur',function(){
                if(_this.$repText&&_this.$textBox.val().match(/^\s*$/)){
                    _this.$repText.show();
                    _this.$textBox.val('');
                }
            })
        }


	}



	$.fn.TextEffect.settings={
        color:'#000',
        isRep:true
	}
})(jQuery);
 
$('input').TextEffect();
 
</script>
</body>
</html>


